import { Button } from "antd"
import MessageBox1 from "../../common/messageBox1"
import { useToast } from "../../common/toast1"
import toast2 from "../../common/toast2"
import SvgIcon from "../../common/SvgIcon"

import { useState, useRef } from "react"
export default function () {
    const [show, setShow] = useState(false)
    const messageBoxRef = useRef(null)

    // 封装的MessageBox组件（通过forwardRef + useImperativeHandle实现）
    function showMessageBox() {
        messageBoxRef.current.show({
            message: "这是MessageBox",
            title: "提示",
            okText: "确认",
            cancelText: "取消",
            onOk: () => {
                messageBoxRef.current.close()
            },
            onCancel: () => {
                messageBoxRef.current.close()
            },
        })
    }

    // 封装的Toast组件（通过Portal + createContext实现，包裹App组件，实现状态共享）
    const { addToast } = useToast()
    function showToast1(type) {
        if (type) {
            addToast({
                message: "这是Toast1",
                type: "success",
                duration: 2000,
            })
        } else {
            addToast("这是Toast1", "success", 2000)
        }
    }

    // 封装的Toast组件（通过正常js操作dom方式，api式调用，没有挂载在全局）
    function showToast2() {
        toast2.show({
            message: "这是Toast2",
            type: "success",
            duration: 2000,
        })
    }

    return (
        <>
            <div className="main_box">
                <h1>本案例展示 react组件封装/全局组件的使用 </h1>
                <div className="main_row">
                    <MessageBox1 ref={messageBoxRef} />
                    <Button onClick={() => showMessageBox()}>显示MessageBox</Button>
                    <p>
                        1、封装的MessageBox组件：通过forwardRef + useImperativeHandle将弹窗组件的Ref和方法暴露给父组件。
                        <br />
                        通过ReactDOM.createRoot/unmount把弹窗添加到body或删除。
                        <br />
                        也可以通过Portal将组件渲染到body中,卸载时移除（react推荐方式）
                    </p>
                </div>
                <div className="main_row">
                    <Button onClick={() => showToast1()} type="primary">
                        全局组件Toast1
                    </Button>
                    <p>2、封装的Toast组件：通过Portal + createContext实现，包裹App组件，实现状态共享。 在根组件包裹ToastProvider，任意子组件通过useToast调用</p>
                </div>
                <div className="main_row">
                    <Button onClick={() => showToast2()} type="primary">
                        全局组件Toast2
                    </Button>
                    <p>3、封装的Toast组件：通过正常js操作dom方式，调用简单，无需预渲染，功能扩展较复杂。</p>
                </div>
                <div className="main_row">
                    <SvgIcon name="emoji1" color="#ffca00" width={100} height={100} />
                    <SvgIcon name="emoji2" color="red" width={100} height={100} />
                    <p>4、封装的SVG组件：需安装svg-sprite-loader 和 svgo-loader插件，并在webpack里面配置。</p>
                </div>
            </div>
        </>
    )
}
